<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>随机获取一条笑话</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
      #mybtn {
        margin-top: 32px;
        height: 40px;
      }
      #mybtn a {
        text-decoration: none;
        background: #2f435e;
        color: #f2f2f2;

        padding: 10px 30px 10px 30px;
        font-size: 16px;
        font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
        font-weight: bold;
        border-radius: 3px;

        -webkit-transition: all linear 0.3s;
        -moz-transition: all linear 0.3s;
        transition: all linear 0.3s;
      }
      #mybtn a:hover {
        background: #385f9e;
      }
      input,
      button {
        border: none;
        outline: none;
      }
      .ant-btn {
        line-height: 1.499;
        position: relative;
        display: inline-block;
        font-weight: 400;
        white-space: nowrap;
        text-align: center;
        background-image: none;
        border: 1px solid transparent;
        -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
        cursor: pointer;
        -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        height: 32px;
        padding: 0 15px;
        font-size: 14px;
        border-radius: 4px;
        color: rgba(0, 0, 0, 0.65);
        background-color: #fff;
        border-color: #d9d9d9;
      }

      .defaultBt {
        background-color: #f6f6f6;
        color: #000000;
      }

      .ant-btn-xm {
        color: #fff;
        background-color: #1890ff;
        border-color: #1890ff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
        -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
      }
      .ant-btn-sy {
        color: #fff;
        background-color: #ff5a44;
        border-color: #ff5a44;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
        -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
      }
      .ant-btn-fk {
        color: #fff;
        background-color: #e1a;
        border-color: #e1a;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
        -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
      }
      .ant-btn-nb {
        color: #fff;
        background-color: #9d4;
        border-color: #9d4;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
        -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
      }

      .bg_xm {
        border: 1px solid #1890ff;
      }
      .bg_sy {
        border: 1px solid #ff5a44;
      }
      .bg_fk {
        border: 1px solid #e1a;
      }
      .bg_nb {
        border: 1px solid #9d4;
      }

      .vintage {
        background: #eee
          url()
          repeat;
        text-shadow: 5px -5px black, 4px -4px white;
        font-weight: bold;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
      }

      .stroke {
        color: transparent;
        -webkit-text-stroke: 1px black;
        letter-spacing: 0.04em;
      }

      body {
        color: #4f6b72;
        background: #e6eae9;
      }

      a {
        color: #c75f3e;
      }

      p {
        text-align: left;
      }

      #mytable {
        padding: 0;
        margin: 0;
      }

      caption {
        padding: 0 0 5px 0;
        width: 700px;
        font: italic 11px 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
        text-align: right;
      }

      th {
        font: bold 11px 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
        color: #4f6b72;
        border-right: 1px solid #c1dad7;
        border-bottom: 1px solid #c1dad7;
        border-top: 1px solid #c1dad7;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-align: left;
        padding: 6px 6px 6px 12px;
        background: #cae8ea no-repeat;
      }

      th.nobg {
        border-top: 0;
        border-left: 0;
        border-right: 1px solid #c1dad7;
        background: none;
      }

      td {
        border-right: 1px solid #c1dad7;
        border-bottom: 1px solid #c1dad7;
        background: #fff;
        font-size: 11px;
        padding: 6px 6px 6px 12px;
        color: #4f6b72;
      }

      td.alt {
        background: #f5fafa;
        color: #797268;
      }

      th.spec {
        border-left: 1px solid #c1dad7;
        border-top: 0;
        background: #fff no-repeat;
        font: bold 10px 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
      }

      th.specalt {
        border-left: 1px solid #c1dad7;
        border-top: 0;
        background: #f5fafa no-repeat;
        font: bold 10px 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
        color: #797268;
      }

      html > body td {
        font-size: 11px;
      }
      body,
      td,
      th {
        font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="vintage"><h1>笑一笑</h1></div>
      <hr />
      <p>{{ joke }}</p>

      <div id="mybtn">
        <a @click="getJoke">获取笑话</a>
      </div>

      <hr />
      <div class="stroke"><h1>天知道</h1></div>
      <div class="hotkey">
        <button
          id="sy"
          :class="cur_btn_cls_sy"
          @click="searchWeather('沈阳','sy')"
        >
          沈阳
        </button>
        <button
          id="xm"
          :class="cur_btn_cls_xm"
          @click="searchWeather('新民','xm')"
        >
          新民
        </button>
        <button
          id="fk"
          :class="cur_btn_cls_fk"
          @click="searchWeather('法库','fk')"
        >
          法库
        </button>
        <button
          id="nb"
          :class="cur_btn_cls_nb"
          @click="searchWeather('宁波','nb')"
        >
          宁波
        </button>
      </div>
      <hr />
      <table id="mytable" cellspacing="0" :class="cur_border_color">
        <tr>
          <td>日期</td>
          <td>天气</td>
          <td>温度</td>
          <td>风力</td>
        </tr>
        <tr v-for="item in weatherList">
          <td>{{ item.date }}</td>
          <td>{{ item.type }}</td>
          <td>
            <b>{{ item.low }}</b
            >~<b>{{ item.high }}</b>
          </td>
          <td>{{ item.fengxiang }}-{{ parseXml(item.fengli) }}</td>
        </tr>
      </table>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        joke: '每次点击可以获取一个随机的笑话',
        weatherList: [],
        cur_border_color: '',
        cur_btn_cls_sy: 'ant-btn defaultBtn',
        cur_btn_cls_xm: 'ant-btn defaultBtn',
        cur_btn_cls_fk: 'ant-btn defaultBtn',
        cur_btn_cls_nb: 'ant-btn defaultBtn',
      },
      created() {
        var that = this
        axios.get('https://autumnfish.cn/api/joke').then(
          function(res) {
            that.joke = res.data
          },
          function(err) {
            console.log(err)
          }
        )
      },
      methods: {
        getJoke() {
          var that = this
          axios.get('https://autumnfish.cn/api/joke').then(
            function(res) {
              that.joke = res.data
            },
            function(err) {
              console.log(err)
            }
          )
        },
        searchWeather: function(city, name) {
          this.cur_border_color = 'bg_' + name

          name === 'sy'
            ? (this.cur_btn_cls_sy = 'ant-btn ant-btn-sy')
            : (this.cur_btn_cls_sy = 'ant-btn defaultBtn')
          name === 'xm'
            ? (this.cur_btn_cls_xm = 'ant-btn ant-btn-xm')
            : (this.cur_btn_cls_xm = 'ant-btn defaultBtn')
          name === 'fk'
            ? (this.cur_btn_cls_fk = 'ant-btn ant-btn-fk')
            : (this.cur_btn_cls_fk = 'ant-btn defaultBtn')
          name === 'nb'
            ? (this.cur_btn_cls_nb = 'ant-btn ant-btn-nb')
            : (this.cur_btn_cls_nb = 'ant-btn defaultBtn')

          axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + city).then(
            res => {
              //console.log(res.data.data.forecast)
              this.weatherList = res.data.data.forecast
            },
            function(err) {
              console.log(err)
            }
          )
        },
        // 解析xml格式
        parseXml(xml) {
          xml = xml.replace('<![CDATA[', '').replace(']]>', '')
          return xml
        },
      },
    })
  </script>
</html>
